<template>
	<view class="onlineResume-page">
		<div class="user-info">
			<navigator url="/pages/user/onlineResume/editUserInfo">
				<image class="edit" src="../../../static/image/edit.png"></image>
			</navigator>
			<div class="avatar">
				<image :src="user.header" mode=""></image>
			</div>
			<div class="name">
				<h3>{{user.nickname}}</h3>
				<div class="msg">
					<p>{{user.current_job_name}}</p>
					<p>{{user.salary_name}}</p>
				</div>
			</div>
			<div class="title">我的优势</div>
			<p>{{user.advantage}}</p>
		</div>

		<div class="wrap userInfo">
			<div class="title">
				<span>个人信息</span>
			</div>
			<div class="list">
				<div class="item-a">
					<image src="../../../static/image/wangzhan@2x.png" mode=""></image>
					<div class="item-info">
						<span>个人网站</span>
						<p>{{user.web_url}}</p>
					</div>
				</div>
				<div class="item-a">
					<image src="../../../static/image/juzhuudi@2x.png" mode=""></image>
					<div class="item-info">
						<span>居住地</span>
						<p>{{user.province}} {{user.city}} {{user.district}}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="resume wrap">
			<div class="title">附件简历</div>
			<div class="resume-wrap" v-if="user.cv_url">
				<image class="pdf" src="../../../static/image/pdf.png" mode=""></image>
				<span>{{user.nickname}}-{{user.current_job_name}}.Pdf</span>
				<image @click="deleteFile" class="close-b" src="../../../static/image/close-b.png" mode=""></image>
			</div>
			<div class="resume-wrap-add" v-else @click="uploadFile">
				<image class="pdf" src="../../../static/image/addto.png" mode=""></image>
				<span>上传简历</span>
			</div>
		</div>

		<div class="upload wrap">
			<div class="title">
				<span>工作经验</span>
				<image @click="() => goDetail('add','','work')" src="../../../static/image/addto.png" mode=""></image>
			</div>
			<div class="list">
				<div class="item" v-for="(item,index) in user.user_job_list" :key="index">
					<!-- <image src="../../../static/image/pdf.png" mode=""></image> -->
					<div class="info">
						<div class="info-title">
							<h4>{{item.current_job_name}}</h4>
							<image @ @click="() => goDetail('edit',item.id,'work')" src="../../../static/image/edit.png"
								mode=""></image>
						</div>
						<div class="info-wrap">
							<p>{{item.company}}</p>
							<span>· {{item.department_name}}</span>
						</div>
						<div class="date">{{item.start_time}}-{{item.end_time}}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upload wrap">
			<div class="title">
				<span>项目经验</span>
				<image @click="() =>goDetail('add','','project')" src="../../../static/image/addto.png" mode=""></image>
			</div>
			<div class="list">
				<div class="item" v-for="(item,index) in user.user_project_list"
					@click="() => goDetail('edit', item.id,'project')">
					<!-- <image src="../../../static/image/pdf.png" mode=""></image> -->
					<div class="info">
						<div class="info-title">
							<h4>{{item.project}}</h4>
							<image @click="() => goDetail('edit',item.id,'project')"
								src="../../../static/image/edit.png" mode=""></image>
						</div>
						<div class="info-wrap">
							<p>{{item.company}}</p>
							<span>· {{item.department}}</span>
						</div>
						<div class="date">{{item.start_time}}-{{item.end_time}}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upload wrap">
			<div class="title">
				<span>教育经历</span>
				<image @click="() => goDetail('add','','educate')" src="../../../static/image/addto.png" mode="">
				</image>
			</div>
			<div class="list">
				<div class="item" v-for="(item,index) in user.user_educate_list" :key="index">
					<!-- <image src="../../../static/image/pdf.png" mode=""></image> -->
					<div class="info">
						<div class="info-title">
							<h4>{{item.school}}</h4>
							<image @click="() => goDetail('edit',item.id,'educate')"
								src="../../../static/image/edit.png" mode=""></image>
						</div>
						<div class="info-wrap">
							<p>{{item.special}}</p>
						</div>
						<div class="date">{{item.start_time}}-{{item.end_time}}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="wrap label-wrap">
			<div class="title">
				<span>个人技能</span>
				<image @click="() => goSkill('user')" src="../../../static/image/edit.png" mode=""></image>
			</div>
			<div class="labels">
				<span v-for="(item,index) in user.user_tag_list">{{item.tag_name}}</span>
			</div>

		</div>

		<div class="wrap label-wrap">
			<div class="title">
				<span>语言技能</span>
				<image @click="() => goSkill('lang')" src="../../../static/image/edit.png" mode=""></image>
			</div>
			<div class="labels">
				<span v-for="(item,index) in user.user_lang_list">{{item.lang_name}}</span>
			</div>
		</div>
	</view>
</template>

<script>
	import GlobalConfig from '@/config/index.js'
	export default {
		data() {
			return {
				user: null
			};
		},
		onShow() {
			this.getUser()
		},
		methods: {
			// 获取个人信息
			async getUser() {
				const data = await this.$http.User.getUser()
				this.user = data
			},
			goDetail(RouteType, id, url) {
				uni.navigateTo({
					url: `/pages/user/onlineResume/${url}?routeType=${RouteType}&id=${id}`
				})
			},
			goSkill(type) {
				uni.navigateTo({
					url: '/pages/user/onlineResume/skill?type=' + type
				})
			},
			uploadFile() {
				uni.chooseMessageFile({
					count: 1,
					type: 'all',
					success: async (res) => {
						console.log(res)
						const {
							data,
							code,
							msg
						} = await this.$http.User.uploadAvatar(res.tempFiles[0].path)
						if (code !== 200) return uni.showToast({
							title: msg,
							icon: 'none'
						})
						let url = GlobalConfig.BASE_URL + data.url
						const result = await this.$http.User.uploadUsercv(url)
						this.getUser()
					}
				})
			},
			deleteFile() {
				uni.showModal({
					title: "删除提示",
					content: '您确定要删除当前简历吗？',
					success: async () => {
						const {
							code,
							msg
						} = await this.$http.User.uploadUsercv('')
						uni.showToast({
							title: code == 200 ? '删除成功' : msg,
							icon: 'none'
						})
						this.getUser()

					}
				})
			}
		}
	}
</script>

<style lang="less">
	.onlineResume-page {
		padding-bottom: 56upx;

		.user-info {
			position: relative;
			margin: 0 32upx;
			box-shadow: 0px 2px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			background: #fff;
			padding-bottom: 32upx;
			padding-top: 48upx;

			.edit {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 48upx;
				right: 16upx;

			}

			.avatar {
				width: 128upx;
				height: 128upx;
				border-radius: 128upx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
					border-radius: 128upx;
				}
			}

			.name {
				margin-bottom: 48upx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				h3 {
					color: #28211F;
					font-size: 44upx;
					font-weight: 500;
					line-height: 44upx;
					margin-bottom: 10upx;
					margin-top: 44upx;
				}

				.msg {
					margin-top: 10upx;
					display: flex;
					align-items: center;

					p {
						color: #666E7A;
						font-size: 28upx;
						font-weight: 500;
						line-height: 28upx;

						&:last-of-type {
							margin-left: 32upx;
						}
					}
				}
			}

			.title {
				padding-bottom: 16upx;
				color: #28211F;
				font-size: 28upx;
				font-weight: 600;
				margin-top: 48upx;
				padding: 0 32upx;
			}

			p {
				color: #666E7A;
				font-size: 24upx;
				font-weight: 400;
				padding: 0 32upx;
				margin-top: 16upx;
				line-height: 40upx;
			}

		}

		.userInfo {
			.item-a {
				display: flex;
				align-items: flex-start;
				margin-top: 34upx;
				border-bottom: 1px solid #EEEEEE;
				padding-bottom: 26upx;

				image {
					width: 38upx;
					height: 38upx;
				}

				.item-info {
					display: flex;
					flex-direction: column;
					margin-left: 30upx;

					span {
						font-size: 28upx;
						font-weight: 600;
						color: #28211F;
						line-height: 28upx;
					}

					p {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
						padding-top: 6upx;
					}
				}
			}
		}

		.wrap {
			box-shadow: 0px 0px 10upx 2upx rgba(241, 241, 241, 1);
			border-radius: 8upx;
			padding: 32upx;
			margin: 0 30upx;
			padding-bottom: 0;
			margin-top: 20upx;

			.title {
				display: flex;
				align-items: center;

				span {
					color: #28211F;
					font-size: 28upx;
					font-weight: 600;
					line-height: 28upx;
					flex: 1;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

		}

		.resume {
			padding-bottom: 30upx;
			margin-top: 78upx;

			.resume-wrap-add {
				border: 1px solid #ccc;
				padding-left: 42upx;
				padding-right: 34upx;
				margin-top: 32upx;
				height: 116upx;
				border-radius: 8upx;
				display: flex;
				align-items: center;

				.pdf {
					width: 48upx;
					height: 48upx;
				}

				span {
					margin-left: 24upx;
					color: #666E7A;
					font-size: 24upx;
					font-weight: 600;
					flex: 1;
				}
			}

			.resume-wrap {
				margin-top: 32upx;
				background: #F4FBFD;
				border: 1px solid #2AABE2;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				padding-left: 42upx;
				padding-right: 34upx;
				height: 116upx;

				.pdf {
					width: 48upx;
					height: 48upx;
				}

				span {
					margin-left: 24upx;
					color: #2AABE2;
					font-size: 24upx;
					font-weight: 600;
					flex: 1;
				}

				.close-b {
					width: 32upx;
					height: 32upx;
				}
			}

		}

		.upload {
			margin-bottom: 4upx;
			padding-bottom: 26upx;

			.item {
				margin-top: 28upx;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #EEEEEE;
				padding-bottom: 26upx;

				&:last-of-type {
					border-bottom: unset;
					padding-bottom: unset;
				}

				image {
					width: 64upx;
					height: 64upx;
					margin-right: 32upx;
				}

				.info {
					flex: 1;

					.info-title {
						display: flex;
						align-items: center;

						h4 {
							color: #28211F;
							font-size: 28upx;
							line-height: 28upx;
							font-weight: 600;
							flex: 1;
						}

						image {
							width: 32upx;
							height: 32upx;
							margin: 0;
						}

					}
				}

				.info-wrap {
					display: flex;
					align-items: center;
					margin-top: 12upx;

					p {
						color: #666E7A;
						font-size: 24upx;
						font-weight: 400;
						line-height: 24upx;
					}

					span {
						color: #2AABE2;
						font-size: 24upx;
						font-weight: 400;
						line-height: 24upx;
					}
				}

				.date {
					color: #666E7A;
					font-size: 24upx;
					font-weight: 400;
					margin-top: 8upx;
				}
			}
		}

		.label-wrap {
			.labels {
				display: flex;
				align-items: center;
				margin-top: 32upx;
				padding-bottom: 32upx;
				flex-wrap: wrap;

				span {
					border-radius: 48upx;
					border: 1px solid #2AABE2;
					margin-right: 16upx;
					color: #2AABE2;
					font-size: 24upx;
					font-weight: 400;
					height: 64upx;
					line-height: 64upx;
					padding: 0 24upx;

				}
			}
		}
	}
</style>
